<template>
  <div class="fillcontain" v-loading="loading">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="所属规则组">
            <el-select v-model="dataForm.groupIdentify" filterable placeholder="请选择">
              <el-option
                v-for="item in groups"
                :key="item.groupIdentify"
                :label="item.groupName"
                :value="item.groupIdentify">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="案例名称">
            <el-input v-model="dataForm.templateName" placeholder="案例名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="getDataList()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
            <el-button v-if="isAuth('message:sceneAdd')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <el-button type="info" plain size="mini" style="margin-left: 10px;" @click="addOrUpdateHandle()">新增</el-button>
        </el-col>
      </el-row>

      <!-- 查询结果列表 -->
      <div class="table_container">
        <!-- 列表 -->
        <el-table
          :data="dataList"
          border
          style="width: 100%; ">
          <el-table-column
            type="index"
            header-align="center"
            lable="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="groupIdentify"
            header-align="center"
            align="center"
            label="所属规则组">
          </el-table-column>
          <el-table-column
            prop="templateName"
            header-align="center"
            align="center"
            label="案例名称">
          </el-table-column>
          <el-table-column
            prop="remark"
            header-align="center"
            align="center"
            label="备注">
          </el-table-column>
          <el-table-column
            prop="isEffect"
            header-align="center"
            align="center"
            label="状态">
            <template slot-scope="scope">
              {{scope.row.isEffect | isEffectFilter}}
            </template>
          </el-table-column>


          <el-table-column
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button  type="text" size="small"
                          @click="addOrUpdateHandle(scope.row.id)">修改
              </el-button>
              <el-button v-if="scope.row.isEffect==='1'" type="text" size="small" @click="edit(scope.row)">禁用</el-button>
              <el-button v-if="scope.row.isEffect==='0'" type="text" size="small" @click="edit(scope.row)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <!-- 分页 -->
              <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="page.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                :total="page.totalPage"
                layout="total, sizes, prev, pager, next, jumper">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>


  </div>
</template>

<script>
    import {pageData, updateData} from '@/api/testCase/groupCase'
    import AddOrUpdate from './add-or-update'
    import {listGroupData} from '@/api/ruleConfig/groupInfo'
    import constant from "../../../../../api/constant";

    export default {
        data() {
            return {
                groups: [],
                loading: false,
                dataForm: {
                    templateName: '',
                    groupIdentify: ''
                },
                dataList: [],
                dataListLoading: false,
                addOrUpdateVisible: false,
                page: {
                    pageIndex: 1,
                    pageSize: 10,
                    totalPage: 0
                }
            }
        },
        components: {
            AddOrUpdate
        },
        activated() {
            this.getDataList()
            this.listGroupData()
        },
        methods: {
            reset(){
                this.dataForm = {
                    templateName: '',
                    groupIdentify: ''
                }
            },
            //启用禁用
            edit(row) {
                let data = row
                if (row.isEffect === '0') {
                    data.isEffect = '1'
                } else {
                    data.isEffect = '0'
                }
                updateData(JSON.stringify(data)).then(res => {
                    this.getDataList()
                })
            },
            // 获取规则组信息
            listGroupData() {
                let params = {}
                listGroupData(params).then(res => {
                    this.groups = res.data.data
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.page.pageSize = val
                this.page.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.page.pageIndex = val
                this.getDataList()
            },
            // 获取数据列表
            getDataList() {
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                let params = {
                    pageNumber: this.page.pageIndex,
                    pageSize: this.page.pageSize,
                    groupIdentify: this.dataForm.sceneIdentify,
                    templateName: this.dataForm.messageName
                }
                pageData(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    this.dataList = res.data.data.list
                    this.page.totalPage = res.data.data.total
                }).catch(err=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                constant.clearTag(this)
                if(id){
                    this.$router.push({path: "/drools-testCase/groupCase/add-or-update/"+id})
                }else{
                    this.$router.push({path: "/drools-testCase/groupCase/add-or-update"})
                }

            }
        },
        filters: {
            isEffectFilter: function (value) {
                return constant.getLabel(value, constant.ruleConfig.isEffects)
            }
        }
    }
</script>
<style>
  body .el-table th.gutter {
    display: table-cell !important
  }

  .keys {
    word-wrap: break-word;
    word-break: normal;
  }
</style>
